<template>
    <ex-dialog
      width="1000px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <template v-if="pathType == 'add' || pathType == 'edit'">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" :disabled="disabled">
            <el-row>
              <el-col :span="18">
                <el-form-item label="客户名称：">
                  <div>{{clientName}}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="上传责任人：">
                  <div>{{userName}}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="付款方式：" prop="payType">
                  <el-select v-model="ruleForm.payType" filterable placeholder="请选择" size="small" >
                    <el-option v-for="item in payTypeList" :key="item.id" :label="item.value" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="付款时间：" prop="payTime">
                  <el-date-picker
                    v-model="ruleForm.payTime"
                    align="right"
                    format="yyyy-MM-dd" 
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="回款金额：" prop="payMoney">
                  <el-input v-model="ruleForm.payMoney" placeholder="请填写回款金额"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="备注：" prop="remark"> 
                  <el-input
                    type="textarea"
                    maxlength="200"
                    :autosize="{ minRows: 5, maxRows: 10}"
                    placeholder="备注"
                    v-model="ruleForm.remark">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="上传付款截图:" ref="imgRef" prop="imageList">
                  <ImageUploadMore :limit="3" :fileSize="20" @successImg="getCommodityImgList($event)"
                        :value="ruleForm.imageList" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
        <template v-if="pathType == 'look'">
          <div class="detaBox">
            <div class="listTxt">
              <div class="left">提交时间：</div><div class="right">{{info.createTime}}</div>
            </div>
            <div class="listTxt">
              <div class="left">客户名称：</div><div class="right">{{info.clientName}}</div>
            </div>
            <div class="listTxt">
              <div class="left">上传责任人：</div><div class="right">{{info.nickName}}</div>
            </div>
            <div class="listTxt">
              <div class="left">付款方式：</div><div class="right">{{info.payType}}</div>
            </div>
            <div class="listTxt">
              <div class="left">付款时间：</div><div class="right">{{info.payTime}}</div>
            </div>
            <div class="listTxt">
              <div class="left">回款金额：</div><div class="right">{{info.payMoney}}元</div>
            </div>
            <div class="listTxt">
              <div class="left">备注：</div><div class="right">{{info.remark}}</div>
            </div>
            <div class="listbox">
              <div class="left">上传付款截图：</div><div class="right">
                <ImageUploadMore :limit="info.imageList.length" :isShowTip="false" :fileSize="20" @successImg="getCommodityImgList($event)"
                        :value="info.imageList" :disabled='true' />
              </div>
            </div>
          </div>

        </template>
          
      </div>
      <div class="button_box">
        <el-button @click="handleClose">取消</el-button>
        <el-button
          v-if="pathType == 'add' || pathType =='edit'"
          type="primary"
          :loading="AgreeLoading"
          @click="submitForm('ruleForm')"
        >保存提交</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    addReceipt,
    editClient,
    receiptInfo,
    recordDetail,
    editRecord,
  } from "@/api/customer/customerFile";
  import { mapGetters } from 'vuex'
  import { getUserName } from '@/utils/auth'

  export default {
    components: {
      Loading,
    },
    computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device',
      'userName',
    ])
  },
    props: {
      visible: Boolean,
      clientId: String,
      clientName: String,
      pathType: String,
      refundId: String,
    },
    data() {
      var checkPayMoney  = (rule, value, callback) => {
        //销售原价校验
        let regNumber = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
        if(value === ''){
          return callback(new Error("请填写回款金额"));
        }
        else if (regNumber.test(value) == false || value === "0.00" || value === "0.0") {
          return callback(new Error("请填写大于0且最多保留两位小数的数值"));
        }else{
          return callback();
        }
        
      };
      return {
        labelWidth: "150px",
        inputWidth: "420px",
        title: "新建回款",
        loading: false,
        disabled: false,
        AgreeLoading: false,
        ruleForm: {
          clientId: '',//客户档案id
          payType: "", //付款方式 1 现金 2 扫码 3公对公转账 bee_client_receipt_record_pay_type
          payTime: '',//	付款时间
          payMoney: "", //回款金额
          remark: "", //	备注
          imageList: "", //	付款截图列表
         
        },
        payTypeList: [],
        clientList: [],
        info: {},
        rules: {
        
          payType: [
            { required: true,message: "请选择",trigger: ["change" ]}
          ],

          payTime: [
            { required: true,message: "请选择时间",trigger: ["change" ]}
          ],
          payMoney: [
            { validator: checkPayMoney,required: true,required: true,trigger: ["change", "bulr"]}
          ],
          remark: [
            { required: true,message: "请填写备注",trigger: ["change", "bulr"]}
          ],
          imageList: [
            {required: true, message: "请上传图片",trigger: ["change"]}
          ],
         
        },
      };
    },
    
    created() {
      console.log('this.pathType',this.pathType)
      this.ruleForm.clientId = this.clientId
      this.getDict()
      if(this.pathType == 'add'){
        this.title = '新建回款'
      }else if(this.pathType == 'edit'){
        this.title = '编辑回款'
        this.getEditInfo()
      }
      else if(this.pathType == 'look'){
        this.title = '查看回款'
        this.getDetail()
      }
    },
    mounted() {
     
    },
    methods: {
      //获取状态字典
      getDict() {
        var dictType = "bee_client_receipt_record_pay_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.payTypeList = res.result[0].dictList
          
          })
          .finally(() => {
            this.loading = false;
          });
          console.log('this.industryList',this.industryList)
      },
      getCommodityImgList(e, index) {
        console.log(e, index)
        if (e != '') {
          this.ruleForm.imageList = e.split(",")
        } else {
          this.ruleForm.imageList = []
        }
        this.$refs['commodityImgListRef'].clearValidate();
      },
      //获取详情
      getDetail(){
        var id = this.refundId
        receiptInfo(id).then(res => {
          var data = res.result
          
          this.info = data
        })
      },
      
      //获取编辑详情
      getEditInfo(){
        var id = this.refundId
        recordDetail(id).then(res => {
          var data = res.result
          this.ruleForm = data
        })
      },
  
  
      //选择时间
      changeTime(e){
        this.ruleForm.serviceTimeStart = e[0]
        this.ruleForm.serviceTimeEnd = e[1]
  
      },
      
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      submitForm(formName) {
        console.log(this.ruleForm);
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm
            }
            if(this.pathType == 'add'){
              addReceipt(data).then(res => {
                this.handleClose()
                this.$message.success('创建成功')
                this.$emit('success')
                this.AgreeLoading = false
              }).finally(()=>{
                this.AgreeLoading = false
              })
            }else if(this.pathType == 'edit'){
              editRecord(data).then(res => {
                this.handleClose()
                this.$message.success('修改成功')
                this.$emit('success')
                this.AgreeLoading = false
              }).finally(()=>{
                this.AgreeLoading = false
              })
            }
            
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select,.el-input,.el-cascader{
    width: 400px;
  }
  .main {
    padding: 20px 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
  }
  .el-radio-group{
    display: flex;
    flex-direction: column;
    .el-radio{
      margin-bottom: 14px;
    }
  }
  .txt{
    font-size: 20px;
    font-weight: 500;
    color: #333;
    border-bottom: 4px solid #1890ff;
    margin-bottom: 20px;
    padding-bottom: 14px;
  }
  .listTxt{
    display: flex;
    justify-content: flex-start;
    height: 50px;
    align-items: center;
    .left{
      width: 100px;
    }
    .right{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img{
        width: 100px;
        margin-right: 18px;
        border-radius: 8px;
      }
    }
  }
  .listbox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  </style>
  